import { animate, group, query, stagger, state, style, transition, trigger } from "@angular/animations";
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  standalone:true,
  selector:'animate-component',
  imports:[CommonModule,FormsModule],
  animations:[
    trigger("openClose",[
      state('open',style({
        width: '500px',
        height:'300px',
        opacity:1,
        right: '40%',
        backgroundColor:'yellow',
        clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
        borderRadius: '15px'
      })),
      state('closed',style({
        opacity:0,
        display:'none',
        right: '20px',
        width: '60px',
        height: '60px',
        backgroundColor:"blue",
        clipPath: 'polygon(80% 0, 100% 40%, 100% 60%, 80% 100%)',
      })),
      state('hide',style({
        display:'none'
      })),
      // transition('open <=> closed', [ 效果与下面的一样
      transition("open => closed, closed => open",[
        animate('0.5s  ease-in-out')
      ]),
      // transition("hide => closed ,closed => open",[
      //   animate("0.5s  ease-in-out")
      // ])
    ]),
    trigger("flyInOut",[
      state('in', style({ transform: 'translateX(0)',width:'*',opacity:1 })),
      transition('void => *',[
        style({
          transform:'translateX(-100px)',// 进入时的开始位置
          width:'*',
          opacity:0
        }),
        group([   // 定义同一个元素同时播放多个时序的动画 sequence() 定义同一个元素一个接一个播放动画
          animate('0.3s 0.1s ease-in-out',style({transform:"translateX(0)",width:"*",})),
          animate("0.3s ease-in-out",style({opacity:1,}))
        ]),
        // animate("0.2s ease-in-out")
      ]),
      transition("* => void",[
        group([
          animate("0.3s ease-in-out",style({transform:"translateX(50px)"})),
          animate("0.3s 0.2s ease-in-out",style({opacity:0,}))
        ])
        // animate("0.2s ease-in-out"),
        // style({transform:'translateX(100%)'})// 离开时的结束位置
      ])
    ]),
    trigger("filterAnimation",[
      transition(':enter,* => 0, *=>-1',[]),
      transition(':increment',[
        query(':enter',[
          style({opacity:0,width:0}),
          stagger(50,[
            animate("1000ms ease-out",style({opacity:1,width:'*'})),
          ])
        ],{optional:true})
      ]),
      transition(":decrement",[
        query(":leave",[
          stagger(50,[
            animate("1000ms ease-out",style({opacity:0,width:0}))
          ])
        ])
      ])
    ]),
    trigger("pageAnimations",[
      transition(':enter',[                                   // 定义添加元素的动画
        query(".hero",[                                       // 定义哪些子元素执行动画
          style({opacity:0,transform:'translateY(-100px)'}),  // 元素添加时的位置和透明度
          stagger(100,[                                       // 延迟100毫秒播放动画   这里每个子元素之间延迟100毫秒
            animate('500ms cubic-bezier(0.35,0,0.25,1)'),     // 根据三次贝塞尔曲线播放一个0.5s的动画
            style({opacity:1,transform:"none"})               // 动画结束时的位置和透明的
          ])
        ])
      ])
    ])
  ],
  templateUrl:'./animate.component.html',
  styleUrls:["./animate.component.scss"]

})

export class AnimateComponent {
  isOpen=true;
  data=[{
    name:"item 1",
  },{
    name:"item 2",
  },{
    name:"item 3",
  }];
  numberValue=100;
  toggle(){
    this.isOpen=!this.isOpen;
  };

  addListItem(){
    this.data.push({name:`item ${this.data.length+1}`});
  }

  removeListItem(){
    if(this.data.length>0){
      this.data.splice(this.data.length-1,1)
    }
  }
}